<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
  <script src="../../../js/echarts.min.js" charset="utf-8"></script>
</head>


<body>
  <div id="main" style="width: 600px; height:400px;"></div>


  <script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;


    $.ajax({
      url: "http://localhost:8080/pet/petPie",
      data: {},
      success: function (result) {
        var name = [];
        var value = [];
        var arr = result.data.typePic;
        for (var i = 0; i < arr.length; i++) {
          name.push(arr[0]);
          value.push(arr[1]);
        }
        option = {
          title: {
            text: '品种比例饼状图',
            // subtext: '性别',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '品种',
              type: 'pie',
              radius: '50%',
              data: [
                { value: arr[0].value, name: arr[0].name },
                { value: arr[1].value, name: arr[1].name },
                { value: arr[2].value, name: arr[2].name },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
      },
      dataType: "json"
    })
  </script>
</body>


</html>